<template>
	<view class="conbox">
		<u-icon name="arrow-left" size="30" color="#ffffff" @click="back" class="back"></u-icon>
		<image src="/static/page_bg.png" class="cont" mode=""></image>
		<image src="../../static/title_img.png" mode="" class="top_img"></image>
		<view class="title_text">【天天有好运】</view>
		<view class="container">
			<!-- 背景 -->
			<view class="main" style="padding-top: 50upx;">
				<view class="canvas-container" :animation="animationData">
					<view class="canvas-content" id="zhuanpano" style="">
						<view class="canvas-line">
							<view class="canvas-litem" v-for="(item, index) in list" :key="index" :style="{ transform: 'rotate(' + (index * width + width / 2) + 'deg)' }"></view>
						</view>

						<view class="canvas-list">
							<view class="canvas-item" :style="{ transform: 'rotate(' + index * width + 'deg)', zIndex: index }" v-for="(iteml, index) in list" :key="index">
								<view class="canvas-item-text" :style="'transform:rotate(' + index + ')'">
									<image :src="iteml.imgUrl" mode="" v-if="iteml.imgUrl"></image>
									<text class="b" style="font-size: 32upx;">{{ iteml.name }}</text>
									<text class="icon-awrad iconfont " :class="iteml.icon"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<image :src="lock ? '../../static/btn_grey.png' : '../../static/this.png'" class="canvas-btn" mode="" @click="playReward"></image>
				<view class="bottom_box">
					<view class="btn_box">
						<u-button type="warning" size="mini" class="get_count btn" hover-class="none">获取次数</u-button>
						<u-button type="error" size="mini" class="get_gift btn" hover-class="none" @click="toRecord">中奖纪录</u-button>
					</view>
					<text style="padding-bottom: 10upx;">每次抽奖消耗 100 积分</text>
					<text>
						剩余积分 1000，剩余
						<text class="number">10</text>
						次抽奖
					</text>
				</view>
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="rect_title">恭喜您中奖</view>
					<image :src="giftImg" mode=""></image>
					<button type="warning" size="mini" class="get_count btn" hover-class="none" @click="toRecord">去领奖</button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lock: false,
			show: false,
			giftImg: '',
			list: [
				{
					name: '5折',
					value: '5',
					icon: 'icondazhe text-danger',
					imgUrl: '/static/myImage/user.png'
				},
				{
					name: '6折',
					value: '6',
					icon: 'icondazhe text-danger',
					imgUrl: '/static/myImage/user.png'
				},
				{
					name: '7折',
					value: '7',
					icon: 'icondazhe text-danger',
					imgUrl: '/static/myImage/user.png'
				},
				{
					name: '8折',
					value: '8',
					icon: 'icondazhe text-danger',
					imgUrl: '/static/myImage/user.png'
				},
				{
					name: '9折',
					value: '9',
					icon: 'icondazhe text-danger',
					imgUrl: '/static/myImage/user.png'
				},
				{
					name: '感谢参与',
					value: '10',
					icon: 'iconfangqi1 text-master',
					isNoPrize: true // 是否未中奖
				}
			],
			width: 0,
			animationData: {},
			btnDisabled: ''
		};
	},
	onLoad: function() {
		// 获取奖品列表
		this.width = 360 / this.list.length;
	},
	methods: {
		animation(index, duration) {
			//中奖index
			var list = this.list;
			// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
			var runNum = 4; //旋转8周

			// 旋转角度
			this.runDeg = this.runDeg || 0;
			this.runDeg = this.runDeg + (360 - (this.runDeg % 360)) + (360 * runNum - index * (360 / list.length)) + 1;
			//创建动画
			var animationRun = uni.createAnimation({
				duration: duration,
				timingFunction: 'ease'
			});
			animationRun.rotate(this.runDeg).step();
			this.animationData = animationRun.export();
			this.btnDisabled = 'disabled';
		},
		//发起抽奖
		playReward() {
			if (this.lock) {
				return;
			} else {
				let index = 0,
					duration = 4000;
				this.animation(index, duration);
				this.lock = true;
				this.giftImg = this.list[index].imgUrl
				setTimeout(() => {
					// uni.showModal({ content: this.list[index].isNoPrize ? '抱歉，您未中奖' : `恭喜，中奖: ${this.list[index].name}` });
					// document.getElementById('zhuanpano').style=''
					this.btnDisabled = '';
					this.lock = false;
					this.show = true
				}, duration + 1000);
			}
		},
		toRecord() {
			uni.navigateTo({
				url: '../winningRecord/winningRecord'
			});
			this.show = false
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
};
</script>
<style lang="scss" scoped>

	
.icon-awrad {
	font-size: 50upx !important;
}

.conbox {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
		
	.back {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		top: 60upx;
		left: 30upx;
	}
}

.container {
	/* margin-top: 60upx; */
}

.top_img {
	width: 367upx;
	height: 84upx;
	display: block;
	margin: 100upx auto 0 auto;
}

.title_text {
	width: 100%;
	position: relative;
	text-align: center;
	font-size: 36upx;
	color: #fcefa9;
	margin-top: 40upx;
	z-index: 0;
}
.container,
image.cont {
	width: 100%;
	/* min-height: 100vh; */
	height: auto;
	position: relative;
}

image.cont {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

image.caidai {
	position: absolute;
	top: 0;
	left: 0;
	width: 750upx;
	height: 1024upx;
}

.header-title > view {
	padding: 8upx 16upx;
	border: 1px solid #d89720;
	color: #d89720;
	font-size: 28upx;
	border-radius: 26upx;
}

/* 转盘 */
.canvas-container {
	margin: 0 auto;
	position: relative;
	width: 720upx;
	height: 720upx;
	background: url(../../static/turntable.png) no-repeat;
	background-size: cover;
	border-radius: 50%;
}

.canvas-content {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: block;
	width: 720upx;
	height: 720upx;
	border-radius: inherit;
	/* background-clip: padding-box; */
	/* background-color: #ffcb3f; */
}

.canvas-list {
	position: absolute;
	left: 0;
	top: 0;
	width: inherit;
	height: inherit;
	z-index: 9999;
}

.canvas-item {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #e4370e;
	/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
}

.canvas-item image {
	width: 80upx;
	height: 80upx;
}

.canvas-item-text {
	position: relative;
	display: block;
	padding-top: 140upx;
	margin: 0 auto;
	text-align: center;
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: $red;
}

.canvas-item-text text {
	font-size: 30upx;
}

/* 分隔线 */
.canvas-line {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
}

.canvas-litem {
	position: absolute;
	left: 50%;
	top: 14%;
	width: 3upx;
	height: 530upx;
	/* background-color: rgba(228, 55, 14, 0.4); */
	overflow: hidden;
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	/* transform: translate(-50%, -50%); */
}

/**
* 抽奖按钮
*/
.canvas-btn {
	position: absolute;
	left: 50%;
	top: 42%;
	z-index: 400;
	width: 218upx;
	height: 227upx;
	transform: translate(-50%, -50%);
}

.canvas-btn::after {
	position: absolute;
	display: block;
	content: ' ';
	left: 12upx;
	top: -44upx;
	width: 0;
	height: 0;
	overflow: hidden;
	border-width: 30upx;
	border-style: solid;
	border-color: transparent;
	/* border-bottom-color: #e44025; */
}
.canvas-btn.disabled {
	pointer-events: none;
	background: #b07a7b;
	color: #ccc;
}

.canvas-btn.disabled::after {
	border-bottom-color: #b07a7b;
}

.typecheckbox view {
	border: 1px solid #ff3637;
	background: transparent;
	color: #ff3637;
	display: flex;
	height: 60upx;
	width: 140upx;
	border-radius: 50upx;
	align-items: center;
	justify-content: center;
	display: flex;
	margin-left: 20upx;
}

.bottom_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
	font-size: 30upx;
}

.btn_box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40upx;
}

.btn {
	// padding: 13upx 40upx;
	// border-radius: 10upx;
	// display: inline-block;
	font-size: 30upx;
	color: #ffffff;
}
button::after {
	border: none;
}
.get_count {
	background: #ff9b0b;
	margin-right: 60upx;
}

.get_gift {
	background: $red;
}

.number {
	padding: 5upx !important;
	border-radius: 4upx !important;
	margin: 0 4upx;
	background: #fabc13;
}

.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	position: relative;
	width: 500upx;
	height: 506upx;
	background: url(../../static/gift_pop.png) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	padding-top: 60upx;
	.rect_title {
		font-size: 34upx;
		color: #FF9B0B;
		margin-bottom: 30upx;
	}
	image {
		width: 100upx;
		height: 100upx;
	}
	button {
		position: absolute;
		bottom: 30upx;
		left: 50%;
		transform: translate(-50%);
		white-space: nowrap;
	}
		
}
</style>
